<template>
    <div>
        <el-dialog :title="roleDialog.title" :visible.sync="roleDialog.rolesModel" >
            <el-form :model="rolesForm" :rules="rolesRules"
            ref="rolesRuleForm">

                <el-form-item label="角色名称" label-width="100px"  prop="roleName">
                    <el-input v-model="rolesForm.roleName" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="角色描述" label-width="100px"  prop="roleDesc">
                    <el-input v-model="rolesForm.roleDesc" autocomplete="off"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="roleDialog.rolesModel = false">取 消</el-button>
                <el-button type="primary" @click="sureRole">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { addroles ,editroles} from "@/utils/ApI（roles）/rolesAPI";
export default {
    props: {
        roleDialog: Object,
        rolesForm: Object
    },
    data() {
        return {
            // 表单校验
            rolesRules: {
                roleName: [
                    { required: true, message: '请输入角色名称', trigger: 'blur' },
                    { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                ],
                roleDesc: [
                    { required: true, message: '请输入角色描述', trigger: 'blur' },
                    { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
                ],
            }
        };
    },

    mounted() {

    },

    methods: {
        // 关闭模态框
        close() {
            this.roleDialog.rolesModel = false
        },
        //   
        sureRole() {
            // 校验
            this.$refs.rolesRuleForm.validate(async (valid) => {
                if (!valid) {
                    console.log('error submit!!');
                    return false;
                } else {
                    //  添加
                    if (this.roleDialog.type == 'add') {

                        let res = await addroles(this.rolesForm)
                        console.log(res);
                        if (res.meta.status == 201) {
                            this.$message.success(res.meta.msg)
                        } else {
                            this.$message.error(res.meta.msg)
                        }

                    } else { 
                        let res = await editroles(this.rolesForm.id,this.rolesForm)
                        console.log(res);
                        if (res.meta.status == 200) {
                            this.$message.success(res.meta.msg)
                        } else {
                            this.$message.error(res.meta.msg)
                        }
                    }

                    this. close();
                    this.$emit('getRoles')
                }
            });
        }
    },
};
</script>

<style lang="scss" scoped>

</style>